---
title: Badge
description: A component for displaying small labels and status indicators.
metaDescription: Create badges and status indicators for React and Solid.js applications. Display labels, counts, and statuses with customizable colors and variants.
category: data-display
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/badge.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Badge } from '@/components/ui'
```

```tsx
<Badge>Badge</Badge>
```

## Examples

### Icon

Render an icon within the badge directly.

<ComponentExample name="icon" />

### Variants

Use the `variant` prop to change the appearance of the badge.

<ComponentExample name="variants" />

### Sizes

Use the `size` prop to change the size of the badge.

<ComponentExample name="sizes" />

## Props

<PropsTable />

